<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .layui-table-page select {
            height: 22px;
        }
        .layui-form-item{width: 48%;margin-left: 10px; float: left;clear: inherit;}
    </style>
</head>

<body>
<div>
    <div class="main_box">
        <div class="panel-heading">
            <ul class="nav nav-tabs" id="navTabs">
                <li class="active"><a class="receivePane" data-tab=""  href="#" onclick="p_admin_add('详情【物料号：'+ partsNum + '】','iventory_details.html?recordId='+recordId+ '&partsNum='+partsNum,'1200','600')">详情</a></li>
                <li class=""><a class="payPane" data-tab="" href="#" onclick="p_admin_add('详情【物料号：'+ partsNum + '】','iventory_warehousing_record.html?recordId='+recordId+ '&partsNum='+partsNum,'1200','600')">入库记录</a></li>
                <li class=""><a class="payPane" data-tab="" href="#" onclick="p_admin_add('详情【物料号：'+ partsNum + '】','iventory_delivery_record.html?recordId='+recordId+ '&partsNum='+partsNum,'1200','600')">出库记录</a></li>

            </ul>
        </div>
    </div>

    <form class="layui-form x-center" id="app" lay-filter="updateInfo">

        <div class="layui-form-pane" style="margin-top: 15px;">
            <h3 style="text-align: left">配件信息：</h3>
            <div class="layui-form-item">
                <label class="layui-form-label">配件名称</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" lay-verify="required" name="partsName" id="partsName"
                            placeholder="配件名称" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配件规格</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" lay-verify="required" name="specification" id="specification"
                            placeholder="配件规格" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">适用品牌</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="applicableModels" id="applicableModels"
                            placeholder="适用品牌" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">适用梯型</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" lay-verify="required" name="applicableElevator" id="applicableElevator"
                            placeholder="适用梯型" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="partsRemark" id="partsRemark" placeholder="备注" disabled>
                </div>
            </div>

            <h3 style="text-align: left; clear: both; ">配件价格：</h3>
            <div class="layui-form-item">
                <label class="layui-form-label">成本单价</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="costPrice" id="costPrice"
                            placeholder="成本单价" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">成本总价</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="costAllPrice" id="costAllPrice"
                            placeholder="成本总价" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">指导单价</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="guideprice" id="guideprice"
                            placeholder="指导单价" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">指导总价</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="guideAllprice" id="guideAllprice"
                            placeholder="指导总价" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">安装指导价</label>
                <div class="layui-input-block">
                    <input  autocomplete="off"  type="text" class="layui-input" name="installGuideprice" id="installGuideprice" placeholder="安装指导价	" disabled>
                </div>
            </div>
            <h3 style="text-align: left;clear: both;"   id="yujin">库房情况 （库房数量： <span id="storeNumUtil"></span>（预警值：<span id="prewarningValue"></span>））：</h3>
            <table class="layui-table" id="test1" lay-filter="test1">
            </table>
            <h3 style="text-align: left;clear: both; ">供应商信息：</h3>
            <table class="layui-table" id="test" lay-filter="test">
            </table>

            <h3 style="text-align: left;">物料图册：</h3>
            <div id="wuliao_img">

            </div>

        </div>
    </form>

</div>
</body>

<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script type="text/javascript" src="../../../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    //配置插件目录
    layui.config({
        base: '../../js/'
        , version: '1.0'
    });
</script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form', 'upload'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element;//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        var form = layui.form;
        okLoading.close($);
    });


    function p_admin_add(title,url,w,h){
        p_admin_show(title,url,w,h);
    }
</script>


<script>
    var recordId = getQueryVariable("recordId");
    var partsNum = getQueryVariable("partsNum");
    console.log(  partsNum);

    const vm = new Vue({
        el: "#app",
        data: {

        },
        created() {

        },
        computed: {

        },
        methods: {

        },
        mounted() {
            var that = this;
            let request = {
                url: 'kf/parts/getPartsMsg',
                data: {
                    userId: $userId,
                    id:recordId
                },
                method: "get"
            }
            sendRequest(request, (res) => {
                var info = res.data.partsInf;
                var parts=res.data.partsPrice;
                var storeNumUtil=res.data.warehouse.partsCountUtil;
                $("#storeNumUtil").html(storeNumUtil);
                var safetyPrecaution=res.data.warehouse.safetyPrecaution;
                $("#prewarningValue").html(safetyPrecaution);
                console.log(res);

                layui.use(['table', 'form', 'upload','layer'], function() {
                    var table = layui.table;
                    var form = layui.form;
                    var upload = layui.upload;
                    var picUrl = null ;
                    var oldUrl = null;

                    oldUrl = res.data.partsInf.partsImg;
                    console.log(oldUrl);
                    var str1 = '';
                    if(oldUrl!=""){
                        var arr1 =  oldUrl.split("|");
                        var img=baseHead+"/other/viewUploadFile?id=";
                        for (let i = 0; i < arr1.length; i++) {
                            var img_ss=img+arr1[i];

                            str1 += '<a target="_blank" href="' +img_ss+'"><img style="width: 250px;height: 250px;" ' +
                                'src=' + img + arr1[i] + '></a>';
                        }


                        document.getElementById("wuliao_img").innerHTML=str1;
                    }




                    //表单赋值
                    form.val("updateInfo", { //updateInfo 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值

                        "partsRemark": info.partsRemark,
                        "applicableElevator": info.applicableElevator,
                        "applicableModels": info.applicableModels,
                        "specification": info.specification,
                        "partsName": info.partsName,

                        "installGuideprice": parts.installGuideprice,
                        "guideprice": parts.guideprice,
                        "guideAllprice": parts.guideAllprice,
                        "costPrice": parts.costPrice,
                        "costAllPrice": parts.costAllPrice,

                    });
                    form.render();

                    //自定义验证规则
                    form.verify({
                        nikename: function(value) {
                            if (value.length < 5) {
                                return '昵称至少得5个字符啊';
                            }
                        },
                        pass: [/(.+){6,12}$/, '密码必须6到12位'],
                        repass: function(value) {
                            if ($('#L_pass').val() != $('#L_repass').val()) {
                                return '两次密码不一致';
                            }
                        }
                    });
                    $('#yujin').click(function (){

                        layer.prompt({
                            formType: 2,
                            value: '',
                            title: '修改库房预警值',
                            area: ['200px', '50px'] //自定义文本域宽高
                        }, function(value, index, elem){

                            let request1 = {
                                url: 'kf/parts/getPartsSafetyPrecaution',
                                data: {
                                    userId: $userId,
                                    id:recordId,
                                    number:value,
                                    type:0,
                                },
                                method: "get"
                            }
                            sendRequest(request1, (data) => {
                                console.log(data);
                                if (data.code === 0) {
                                    layer.msg("修改成功", {
                                        icon: 1
                                    });
                                    location.reload();
                                } else {
                                    layer.msg("修改失败，请稍后再试！", {
                                        icon: 5
                                    });
                                }
                            });


                            layer.close(index);
                        });

                    });


                    //普通图片上传



                    //方法级渲染
                    var t1 = table.render({
                        elem: '#test',
                        url: $baseUrl + 'kf/parts/getPartsMsg',
                        where: {
                            userId: $userId,
                            id:recordId
                        },
                        headers: {
                            token: $token
                        }
                        , toolbar: '#toolbarDemo',

                        // toolbar: true,
                        cols: [
                            [
                                {
                                    title: '供应商名称',
                                    fixed: 'left',
                                    templet: function (item) {
                                        return item.supplierName;
                                    }

                                },
                                {
                                    title: '供应商联系人',
                                    templet: function (item) {
                                        return item.contact == null ? '空' : item.contact;
                                    }
                                },
                                {
                                    title: '供货商料号',
                                    templet: function (item) {
                                        return item.supplierNum == null ? '空' : item.supplierNum;
                                    }
                                },
                                {
                                    title: ' 配件报价',
                                    templet: function (item) {
                                        return item.partsOffer == null ? '空' : item.partsOffer;
                                    }
                                },
                                {
                                    title: '备注',
                                    templet: function (item) {
                                        return item.offerRemark;
                                    }

                                },

                                {
                                    title: '最新入库日期',
                                    templet: function (item) {
                                        return item.procurementTime;
                                    }

                                },

                                {
                                    title: '入库单价',
                                    templet: function (item) {
                                        return item.onePrice;
                                    }

                                },

                                {
                                    title: '入库数量',
                                    templet: function (item) {
                                        return item.partsNumber;
                                    }

                                },
                            ]
                        ],
                        request: {
                            pageName: 'page', //页码的参数名称，默认：page
                            limitName: 'size',
                        },
                        response: {
                            statusName: 'code' //规定数据状态的字段名称，默认：code
                            ,
                            statusCode: 0 //规定成功的状态码，默认：0
                            ,
                            msgName: 'msg' //规定状态信息的字段名称，默认：msg
                            ,
                            countName: 'total' //规定数据总数的字段名称，默认：count
                            ,
                            dataName: 'data.supplier', //规定数据列表的字段名称，默认：data
                        },
                        id: 'test',
                        page: true,
                        height: 'auto',
                        even: true,
                        done: function (res, curr, count) {
                            //是否有权限或权限是否失效
                            // authorizeState();
                            // console.log(res);
                        }
                    });
                    var t2 = table.render({
                        elem: '#test1',
                        url: $baseUrl + 'kf/parts/getPartsMsg',
                        where: {
                            userId: $userId,
                            id:recordId
                        },
                        headers: {
                            token: $token
                        }
                        , toolbar: '#toolbarDemo',

                        // toolbar: true,
                        cols: [
                            [
                                {
                                    title: '库房名称',
                                    fixed: 'left',
                                    templet: function (item) {
                                        return item.warehouseName;
                                    }

                                },
                                {
                                    title: '库存数量',
                                    templet: function (item) {
                                        return item.storeNumUtil == null ? '空' : item.storeNumUtil;
                                    }
                                },
                                {
                                    title: '预警值',
                                    templet: function (item) {
                                        return item.prewarningValue == null ? '空' : item.prewarningValue;
                                    },
                                    style:'color:blue',
                                    event: 'setSign',

                                },
                                {
                                    title: ' 存放位置',
                                    templet: function (item) {
                                        return item.site == null ? '空' : item.site;
                                    }
                                },
                                {
                                    title: '图片',
                                    templet: function (item) {
                                        if ( item.siteImg != ''&&item.siteImg != null) {
                                            var str = '';
                                            var arr = item.siteImg.split("|");
                                            var img=baseHead+"/other/viewUploadFile?id=";
                                            for (let i = 0; i < arr.length; i++) {

                                                str += '<a target="_blank" href="' + img + arr1[i] +'"><img style="width: 25px;height: 25px;" ' +
                                                    'src=' + img + arr1[i] + '></a>'
                                            }
                                            return str;
                                        } else {
                                            return '空'
                                        }
                                    }

                                },

                            ]
                        ],
                        request: {
                            pageName: 'page', //页码的参数名称，默认：page
                            limitName: 'size',
                        },
                        response: {
                            statusName: 'code' //规定数据状态的字段名称，默认：code
                            ,
                            statusCode: 0 //规定成功的状态码，默认：0
                            ,
                            msgName: 'msg' //规定状态信息的字段名称，默认：msg
                            ,
                            countName: 'total' //规定数据总数的字段名称，默认：count
                            ,
                            dataName: 'data.warehouse.WarehouseStore', //规定数据列表的字段名称，默认：data
                        },
                        id: 'test1',
                        page: true,
                        height: 'auto',
                        even: true,
                        done: function (res, curr, count) {

                            //是否有权限或权限是否失效
                            // authorizeState();
                            // console.log(res);
                        }
                    });




                    table.on('tool(test1)', function(obj){
                        var data = obj.data;
                        console.log(data);
                        if(obj.event === 'setSign'){
                            layer.prompt({
                                formType: 2
                                ,title: '修改 库房名为 ['+ data.warehouseName +'] 的预警值'
                                ,value: data.sign
                            }, function(value, index){
                                layer.close(index);

                                //这里一般是发送修改的Ajax请求
                                let request1 = {
                                    url: 'kf/parts/getPartsSafetyPrecaution',
                                    data: {
                                        userId: $userId,
                                        id:data.warehouseStoreId,
                                        number:value,
                                        type:1,
                                    },
                                    method: "get"
                                }
                                sendRequest(request1, (data) => {
                                    console.log(data);
                                    if (data.code === 0) {
                                        layer.msg("修改成功", {
                                            icon: 1
                                        });
                                        t2.reload();
                                    } else {
                                        layer.msg("修改失败，请稍后再试！", {
                                            icon: 5
                                        });
                                    }
                                });
                                //同步更新表格和缓存对应的值
                                obj.update({
                                    sign: value
                                });
                            });
                        }
                    });



                });
            })
        },


    });

</script>


</html>
